<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
		<title>今日头条加载效果</title>
		<style>
			*{padding:0;margin:0;box-sizing: border-box;}
			html,body{width:100vw;height:100vh;}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			function canvasLoading(){
				this.init();
			}
			canvasLoading.prototype.init = function(){
				if(!document.getElementById("canvasLoading")){
					this.c = document.createElement("canvas");
					document.body.appendChild(this.c);
					this.c.setAttribute("id","canvasLoading");
					this.c.width = 100;
					this.c.height = 100;
					this.c.style.position = "fixed";
					this.c.style.top = "50%";
					this.c.style.left = "50%";
					this.c.style.marginTop = -this.c.height/2 + "px";
					this.c.style.marginLeft = -this.c.width/2 + "px";
					this.c.style.backgroundColor = "#357ca5";
					this.c.style.borderRight = "1px solid rgba(255,255,255,.4)";
					this.c.style.borderBottom = "1px solid rgba(255,255,255,.4)";
					this.c.style.boxShadow = "5px 3px rgba(0,0,0,.4)";
					this.c.style.borderRadius = "4px";
				}else{
					this.c = document.getElementById("canvasLoading");
				}
				this.c.style.display = "block";
				this.ctx = this.c.getContext("2d");
				/*线条宽度和颜色*/
				this.ctx.lineWidth = 1;
				/*线条基础坐标点*/
				this.lineTopBeginX = 50;
				this.lineTopEndX = 95;
				this.lineBottomBeginX = 5;
				this.lineBottomEndX = 95;
				this.lineY = 10;
				/*矩形基础坐标点*/
				this.rectX = 0;
				this.rectY = 0;
				/*动画节点时间标记*/
				this.timeMarkIn = null;
				this.timeMarkOut = null;
				/*是否结束动画*/
				this.isEnd = false;
				this.move();
			}
			canvasLoading.prototype.creatLine = function(){
				var _this = this;
				_this.ctx.strokeStyle = "#fff";
				_this.ctx.beginPath();
				_this.ctx.moveTo(_this.lineTopBeginX,_this.lineY);
				_this.ctx.lineTo(_this.lineTopEndX,_this.lineY);
				_this.ctx.stroke();
				_this.ctx.beginPath();
				_this.ctx.moveTo(_this.lineBottomBeginX,_this.lineY+50);
				_this.ctx.lineTo(_this.lineBottomEndX,_this.lineY+50);
				_this.ctx.stroke();
				_this.lineY += 15;
			}
			canvasLoading.prototype.creatRect = function(){
				var _this = this;
				_this.ctx.beginPath();
				_this.ctx.fillStyle = "#357ca5";
				_this.ctx.fillRect(_this.rectX,_this.rectY,50,50);
				_this.ctx.beginPath();
				_this.ctx.strokeStyle = "#fff";
				_this.ctx.strokeRect(_this.rectX+10,_this.rectY+10,30,30);
			}
			canvasLoading.prototype.creatText = function(){
				var _this = this;
				_this.ctx.beginPath();
				_this.ctx.font = "8px 微软雅黑   normal";
				_this.ctx.fillStyle = "#fff";
				_this.ctx.textAlign = "left";
				_this.ctx.textBaseline = "middle";
				_this.ctx.fillText("用数据改变世界。",10,(_this.c.height/2-14));
				_this.ctx.fillText("博和利",_this.c.width/2+20,(_this.c.height-19));
				_this.ctx.closePath();
			}
			canvasLoading.prototype.move = function(){
				var _this = this;
				if(_this.isEnd) return;
				/*清空画布 */
				_this.ctx.clearRect(0,0,_this.c.width,_this.c.height);
				/*创建线条*/
				_this.lineY = 10;
				for(var i=0;i<=2;i++){
					_this.creatLine();
				}
				/*创建文字*/
//				_this.creatText();
				/*创建矩形*/
				_this.creatRect();
				
				/*每个节点暂停300ms*/
				if((_this.rectX==0 && _this.rectY==0) 
				|| (_this.rectX==50 && _this.rectY==0)
				|| (_this.rectX==50 && _this.rectY==50)
				|| (_this.rectX==0 && _this.rectY==50)
				){
					if(!_this.timeMarkIn){
						_this.timeMarkIn = (new Date()).getTime();
					}
					_this.timeMarkOut = (new Date()).getTime();
					if(_this.timeMarkOut-_this.timeMarkIn<=300){
						_this.requestAnimationFrame()(_this.move.bind(_this));
						return;
					}else{
						_this.timeMarkIn = null;
						_this.timeMarkOut = null;
					}
				}
				/**/
				/*移动线条位置  ,移动矩形位置*/
				if(_this.rectX<50 && _this.rectY==0){
					_this.rectX+=5;
					if(_this.lineTopBeginX>5){
						_this.lineTopBeginX-=5;
						_this.lineTopEndX-=5;
					}
					
				}else if(_this.rectX==50 && _this.rectY<50){
					_this.rectY+=5;
					if(_this.lineTopEndX<95){
						_this.lineTopEndX+=5;
						_this.lineBottomEndX-=5;
					}
				}else if(_this.rectX>0 && _this.rectY==50){
					_this.rectX-=5;
					if(_this.lineBottomBeginX<50){
						_this.lineBottomBeginX+=5;
						_this.lineBottomEndX+=5;
					}
				}else if(_this.rectX==0 && _this.rectY>0){
					_this.rectY-=5;
					if(_this.lineTopBeginX<50){
						_this.lineTopBeginX+=5;
						_this.lineBottomBeginX-=5;
					}
				}
				/*调用requestAnimationFrame方法*/
				_this.requestAnimationFrame()(_this.move.bind(_this));
			}
			canvasLoading.prototype.requestAnimationFrame = function(){
				return window.requestAnimationFrame
					|| window.webkitRequestAnimationFrame
					|| window.mozRequestAnimationFrame
					|| function(callback){setTimeout(callback,1000/60)}
			}
			canvasLoading.prototype.hide = function(){
				this.isEnd = true;
				this.c.style.display = "none";
			}
			window.onload = function(){
				new canvasLoading();
			}
		</script>
	</body>
</html>
